<template>
	<view class="m-goods">
		<u-empty
			:class="['m-income-empty']"
			v-if="!list.length"
			icon="/static/images/projectDetail/no-data.png"
			text="暂无记录~"
			size="40" >
		</u-empty>
		<view class="flex-start-wrap posr">
			<view class="goods" v-for="(item,index) in list" :key="index">
				<view class="goods-content flex-between-nowrap flexdc">
					<view class="goods-img">
						<u-image 
						width="100%"
						:src="item.product_picture_path" 
						mode="widthFix">
						</u-image>
					</view>
					<view class="goods-msg">
						<view class=" goods-msg-content" :style="{'font-size':'15px',}">{{item.product_name}}</view>
						<view class="flex-between-nowrap alic">
							<text class="fz12 c666">
								{{item.product_type == 1?'1元='+item.product_price+'芝草':item.product_price+'芝草'}}
							</text>
							<view style="width: 50px;">
								<m-button  v-if="item.product_number != 0" @clickBtn="clickGoods(item)">兑换</m-button>
								<text class="fz12" v-if="item.product_number == 0">无库存</text>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="title">显示分页信息</view> -->
		<view class="pd30" v-if="page.total > page.page_size">
			<page-pagination @change="goPage" :total="page.total" :pageSize="page.page_size" :showAround="true"></page-pagination>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-goods",
		props:{
			list:{
				type:Array,
				default:()=>[]
			},
			pageData:{
				type:Object,
				default:()=>{}
			},
		},
		watch:{
			page(val){
				
			},
		},
		mounted() {
			this.page = this.pageData || {}
		},
		data() {
			return {
				page:{
					page:1,
					page_size:10,
					total:0
				}
			};
		},
		methods:{
			clickGoods(item){
				window.scrollTo({
					top:0,
					behavior: "smooth"
				})

				this.showDetail(item)
			},
			showDetail(item){
				this.$emit('showDetail',item)
			},
			goPage(val){
				this.$emit('goPage',val)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.m-goods{
		padding: 24px 9px;
		
	}
	.goods{
		width: 25%;
		margin-bottom: 24px;
		&-content{
			box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
			margin:0 15px;
			border-radius: 8px;
			max-height: 284px;
			min-height: 100px;
			height: 100%;
			overflow: hidden;
		}
		&-img{
			overflow: hidden;
		}
		&-msg{
			padding:10px;
			&-content{
				@extend .ellipsis2;
				font-weight: bold;
			}
		}
		
	}
	@media screen and (min-width: 0px) and (max-width:750px){
		.m-goods{
			padding: 24rpx;
		}
		.goods{
			width:50%;
			&-msg{
				padding:10rpx;
			}
		}
	}
</style>